import React, { ReactElement } from "react";
import { Itodo } from "../typings";
import { Button } from "antd";

interface IProps {
  todo: Itodo;
  removeTodo: (id: number) => void;
  toggleTodo: (id: number) => void;
}

const TdItem: React.FC<IProps> = ({
  todo,
  toggleTodo,
  removeTodo,
}): ReactElement => {
  const { id, content, completed } = todo;
  return (
    <div className="td_item">
      <input
        type="checkbox"
        checked={completed}
        onChange={() => toggleTodo(id)}
      />
      <span
        onClick={() => toggleTodo(id)}
        style={{
          textDecoration: completed ? "line-through" : "none",
        }}
      >
        {content}
      </span>
      <Button type="primary" onClick={() => removeTodo(id)}>
        删除
      </Button>
    </div>
  );
};
export default TdItem;
